<template>
    <view class="bigbox">
        <view bar style="background: #fff;">
        </view>
        <view class="logintextbox">

            <view class="logintext" w800>
                {{ GetTitleText() }}
            </view>
            <view class="" f12>
                <view class="" v-if="state.type != 'registered'" hover-class="none" hover-stop-propagation="false">
                    <text style="color: #7e8180;">
                        还没有账号,
                    </text><text style="color: #2D98FF;" @tap="registeredUser()">&nbsp;立即注册</text>
                </view>
            </view>
        </view>
        <view class="loginbox">
            <view class="">
                <view class="getAccount">
                    <view class="" w600>
                        +86
                    </view>
                    <input v-model="state.userinfo.Account" placeholder="输入手机号" type="text">
                </view>
                <view class="getCode" v-if="state.type != 'pwsLogin'">
                    <input v-model="state.userinfo.code" placeholder="输入验证码" type="text">
                    <view class="getCodetext" w600>
                        {{ state.codetext }}
                    </view>
                </view>
                <view class="getCode" v-if="state.type != 'codeLogin'">
                    
                    <input v-model="state.userinfo.pws" placeholder="输入密码" type="password">
                </view>
            </view>
            <view class="LoginButton" @tap="login">
                登录
            </view>
            <view class="setLoginfunc">
                <view @tap="setLoginType">
                    {{ LoginType() }}
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
import { reactive, ref } from "vue"
import { onShow } from "@dcloudio/uni-app"
import { userStore } from "@/store/user.js"
const state = reactive({
    type: "pwsLogin", //codeLogin or pwsLogin or registered
    userinfo: {
        Account: "",
        code: "",
        pws: ""
    },
    codetext: "获取验证码",
    loginText: "短信验证",
    TitleText: "欢迎登录",
    num:1
})
const userState = userStore()
onShow(() => {
    uni.setStorageSync("userinfo", 123456)
    uni.hideLoading()
    console.log(uni.getStorageSync("userinfo"))

    if (state.type == "registered") {
        state.TitleText = "注册"
    }
})
const registeredUser = () => {
    state.userinfo.pws = ""
    state.userinfo.code=""
    state.TitleText = "注册"
    state.type = "registered"
}
const LoginType = () => {
    if (state.type == "pwsLogin") {
        return "短信验证"
    } else {
        return "账号登录"
    }
}
const GetTitleText = () => {
    if (state.type == "registered") {
        return "注册"
    } else {
        return "登录"
    }
}
const setLoginType = () => {
    state.userinfo.pws = ""
    state.userinfo.code=""
    if (state.type == "pwsLogin") {
        state.type = "codeLogin"
    } else {
        state.type = "pwsLogin"
    }
}
const login = () => {
    state.num+=1
    if (!state.userinfo.Account) {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        })
        return
    }
    if (state.type == "registered") {

        if (!state.userinfo.code) {
            uni.showToast({
                title: '请输入验证码',
                icon: 'none'
            })
            return
        }
        if (!state.userinfo.pws) {
            uni.showToast({
                title: '请输入密码',
                icon: 'none'
            })
            return
        }
        userState.registered(state.userinfo).then(res => {
            uni.showToast({
                title: res.data.msg,
                icon: 'none'
            })
            if (res.data.code != 200) {
                return
            }
            uni.setStorageSync("token", res.data.data.token)
            uni.setStorageSync("userinfo", res.data.data)
            uni.switchTab({
                url: "/pages/index/index",
                success: function () {
                    uni.hideLoading()
                }
            })
        })
    } else {
        userState.login(state.userinfo).then(res => {
            uni.showToast({
                title: res.data.msg,
                icon: 'none'
            })
            if (res.data.code != 200) {
                return
            }
            uni.setStorageSync("token", res.data.data.token)
            uni.setStorageSync("userinfo", res.data.data)
            uni.switchTab({
                url: "/pages/index/index",
                success: function () {
                    uni.hideLoading()
                }
            })
        })
    }
    console.log(state.num)
    
}
</script>

<style lang="scss" scoped>
.bigbox {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.logintextbox {
    margin: 0 25px 35px;
}

.logintext {
    margin-top: 25%;
    margin-bottom: 10px;
    font-size: 22px;
}

.loginbox {
    margin: 0 25px;
}

.getAccount {
    display: flex;
    background: #F5F8F7;
    height: 55px;
    align-items: center;
    border-radius: 20px;
    padding-left: 15px;
    overflow: hidden;
    box-sizing: border-box;
}

.getAccount>input {
    height: 100%;
    width: 100%;
    padding-left: 15px;
    font-size: 18px;
}

.getCode {
    display: flex;
    background: #F5F8F7;
    height: 55px;
    align-items: center;
    border-radius: 20px;
    padding-left: 15px;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 25px;
}

.getCode>input {
    height: 100%;
    width: 100%;
    font-size: 18px;
}

.getCodetext {
    white-space: nowrap;
    margin-right: 15px;
    font-size: 14px;
}

.LoginButton {
    width: 100%;
    background: #266EFE;
    display: flex;
    align-items: center;
    margin-top: 35px;
    justify-content: center;
    padding: 10px 0;
    color: #fff;
    border-radius: 25px;
}

.setLoginfunc {
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: center;
    color: #999;
}
</style>
